<!--
 * @Descripttion: 编辑轮播图
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 18:32:00
-->
<template>
  <div class="lb-app-house-edit-banner">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="bannerForm"
        :rules="bannerFormRules"
        ref="bannerForm"
        label-width="140px"
      >
        <el-form-item label="广告位" prop="type">
          <el-radio-group v-model="bannerForm.type">
            <el-radio label="1">房源首页</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片" prop="path">
          <lb-cover
            :fileList="bannerForm.path"
            @selectedFiles="getBanner"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 750 * 580</lb-tool-tips>
        </el-form-item>
        <el-form-item label="跳转类型" prop="link_type">
          <el-radio-group v-model="bannerForm.link_type">
            <el-radio label="1">电话</el-radio>
            <el-radio label="2">其他小程序</el-radio>
            <el-radio label="3">网页</el-radio>
            <el-radio label="4">内部页面</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="跳转链接" prop="link">
          <el-input
            v-model="bannerForm.link"
            placeholder="请输入跳转链接"
          ></el-input>

          <lb-tool-tips
            >小程序跳转链接填写格式如下:
            <div class="mt-md">
              1、跳转到小程序首页
              <div class="mt-md c-link">
                所需参数如下：
                <div class="mt-sm">[1] appId</div>
              </div>
              <div class="mt-md">例如：wx581f0c1732ae745f</div>
            </div>
            <div class="mt-lg">
              2、跳转到小程序指定页面
              <div class="mt-md c-link">
                所需参数如下：
                <div class="mt-sm">[1] appId</div>
                <div class="mt-sm">[2] ; (英文状态下的分号)</div>
                <div class="mt-sm">[3] 页面路径及参数</div>
              </div>
              <div class="mt-md">
                例如：wx581f0c1732ae745f;pages/user/home?key=1&staff_id=1
              </div>
            </div>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="bannerForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('bannerForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navTitle: '',
      id: '',
      bannerForm: {
        type: '1',
        path: '',
        link_type: '1',
        link: '',
        top: ''
      },
      bannerFormRules: {
        type: {
          required: true,
          message: '请选择',
          type: 'string',
          trigger: 'change'
        },
        path: {
          required: true,
          message: '请上传图片',
          type: 'array',
          trigger: 'change'
        },
        link_type: {
          required: true,
          message: '请选择',
          type: 'string',
          trigger: 'blur'
        },
        link: {
          required: true,
          message: '请选择',
          type: 'string',
          trigger: 'blur'
        },
        top: {
          required: true,
          message: '请选择',
          type: 'number',
          trigger: 'blur'
        }
      }
    }
  },
  created () {
    let {
      id
    } = this.$route.query
    if (id) {
      this.id = id
      this.getFormInfo(id)
    }
    this.navTitle = id ? `${this.$t('menu.EditHouseBanner')}` : `${this.$t('menu.AddHouseBanner')}`
  },
  methods: {
    getFormInfo (id) {
      this.$api.getEditHouseBanner({
        id
      }).then(res => {
        console.log(res)
        if (res.code === 200) {
          let {
            type,
            path,
            link,
            top
          } = res.data
          this.bannerForm = {
            type,
            path: [{
              url: typeof (path) === 'string' ? path : path[0]
            }],
            link_type: res.data.link_type,
            link,
            top,
            id
          }
        }
      })
    },
    getBanner (img) {
      this.bannerForm.path = img
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.bannerForm))
          subForm.path = this.bannerForm.path.map(item => {
            return item.url
          })
          if (this.id) {
            this.$api.getEditHouseBanner(subForm).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          } else {
            this.$api.addHouseBanner(subForm).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          }
        }
      })
    },
    goBack () {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-app-house-edit-banner {
  width: 100%;

  .page-main {
    width: 100%;

    .el-input,
    .el-input-number {
      width: 300px;
    }
  }
}
</style>
